<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-nested-tree-node *matTreeNodeDef="let node">
    <div class="mat-tree-node">
      <button mat-icon-button matTreeNodeToggle
              [attr.aria-label]="'toggle ' + node.item"
              [disabled]="!node.children.value.length">
        <mat-icon class="mat-icon-rtl-mirror" *ngIf="node.children.value.length">
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button>
      <mat-checkbox *ngIf="!hasNoContent(node)"
                    [checked]="descendantsAllSelected(node)"
                    [indeterminate]="descendantsPartiallySelected(node)"
                    (change)="todoItemSelectionToggle(node)">
        {{node.item}}
      </mat-checkbox>
      <mat-form-field *ngIf="hasNoContent(node)">
        <input matInput #itemValue placeholder="New item..."
               (blur)="saveNode(node, itemValue.value)">
      </mat-form-field>
      <button mat-icon-button (click)="addNewItem(node)"><mat-icon>add</mat-icon></button>
    </div>
    <div class="demo-tree-node-nested"
         [class.demo-tree-node-invisible]="!treeControl.isExpanded(node)">
      <ng-container matTreeNodeOutlet></ng-container>
    </div>
  </mat-nested-tree-node>
</mat-tree>
